<template>
  <div>
    <div style="position: relative; bottom: 10px; padding: 0 20px">
      <a-button type="primary" @click="submit">{{ select_title }}</a-button>
    </div>
    <a-tabs v-model:activeKey="activeKey" :tab-position="'left'" animated>
      <a-tab-pane key="1" tab="商品基础">
        <div>
          <a-form :model="form" :rules="rules" layout="vertical">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品名称" name="goodsName">
                  <a-input v-model:value="form.goodsName" placeholder="请输入商品名称" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品分类" name="categoryId">
                  <a-select
                    v-model:value="form.categoryId"
                    show-search
                    mode="multiple"
                    placeholder="商品分类"
                    :options="options_type"
                    @change="handleChange3"
                    allowClear
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="副标题" name="other">
                  <a-input v-model:value="form.subtitle" placeholder="请输入商品副标题" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品排序" name="other">
                  <a-input v-model:value="form.keywords" placeholder="请输入商品排序" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品封面" name="other">
                  <a-button @click="uploading('previewUrl')"> 上传图片 </a-button>
                  <div style="display: flex; flex-wrap: nowrap"
                    ><div
                      style="width: 80px; height: 80px; padding: 5px"
                      v-for="(item, index) in form.previewUrl"
                      :key="index"
                    >
                      <img :src="item.url" style="width: 100%; height: 100%; object-fit: contain"
                    /></div>
                  </div>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品轮播图" name="other">
                  <a-button @click="uploading('rotationImgsJson')"> 上传图片 </a-button>
                  <div style="display: flex; flex-wrap: nowrap"
                    ><div
                      style="width: 80px; height: 80px; padding: 5px"
                      v-for="(item, index) in form.rotationImgsJson"
                      :key="index"
                    >
                      <img :src="item.url" style="width: 100%; height: 100%; object-fit: contain"
                    /></div>
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品描述" name="other">
                  <a-textarea
                    v-model:value="form.goodsDetailsJson"
                    placeholder="商品描述"
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="配送类型" name="other">
                  <a-select
                    v-model="form.goodsType"
                    show-search
                    allowClear
                    placeholder="配送类型"
                    :options="options2"
                    :filter-option="filterOption2"
                    @focus="handleFocus2"
                    @blur="handleBlur2"
                    @change="handleChange2"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品价格" name="other">
                  <a-input
                    prefix="￥"
                    suffix="RMB"
                    v-model:value="form.goodsPrice"
                    placeholder="商品价格"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品划线价" name="other">
                  <a-input
                    prefix="￥"
                    suffix="RMB"
                    v-model:value="form.scribePrice"
                    placeholder="商品划线价"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="配送费" name="other">
                  <a-input
                    prefix="￥"
                    suffix="RMB"
                    v-model:value="form.distributionFee"
                    placeholder="配送费"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="打包费" name="other">
                  <a-input
                    prefix="￥"
                    suffix="RMB"
                    v-model:value="form.packingFee"
                    placeholder="打包费"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="赠送积分" name="other">
                  <a-input
                    suffix="积分"
                    v-model:value="form.rewardIntegral"
                    placeholder="赠送积分"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品库存" name="other">
                  <a-input suffix="库存" v-model:value="form.stockNum" placeholder="商品库存" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品状态" name="other">
                  <a-space direction="vertical">
                    <a-switch
                      v-model:checked="form.goodsStatus"
                      checked-children="上架"
                      un-checked-children="下架"
                    />
                  </a-space>
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="推荐位" name="other">
                  <a-space direction="vertical">
                    <a-switch
                      v-model:checked="form.extJson"
                      checked-children="推荐"
                      un-checked-children="不推荐"
                    />
                  </a-space>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item name="other" label="自动上架时间">
                  <a-range-picker
                    v-model:value="showTime"
                    show-time
                    allowClear
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    @change="select_time"
                  />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item label="限购数量" name="other">
                  <a-input suffix="数量" v-model:value="form.limitNum" placeholder="限购数量" />
                </a-form-item>
              </a-col>
            </a-row>

            <!-- <a-row :gutter="16">
            <a-space>
              <a-button>预览</a-button>
              <a-popconfirm
                title="商品规格是否添加过了?"
                ok-text="是的"
                cancel-text="没有"
                @confirm="Add"
                @cancel="cancel"
              >
                <a-button type="primary">添加商品</a-button>
              </a-popconfirm>
            </a-space>
          </a-row> -->
          </a-form></div
        >
      </a-tab-pane>
      <a-tab-pane key="2" tab="添加规格">
        <div>
          <div>
            <a-button v-if="skuList.length" style="width: 20%" @click="savaSku">
              保存规格
            </a-button>
            <a-button v-if="skuList.length" style="width: 20%" @click="clearSku">
              重置规格
            </a-button>
            <a-button v-if="skuList.length" style="width: 20%" @click="product">
              生成数据
            </a-button>
            <a-button v-if="skuList.length" style="width: 20%" @click="deleteSku">
              删除规格
            </a-button>
          </div>
          <div
            style="display: flex; flex-direction: column; padding: 5px"
            v-for="(item, index) in skuList"
            :key="index"
          >
            <div class="skuName">
              <div>
                <span style="padding: 5px">规格名:</span>
                <a-tag closable @close="DelskuName(item, index)" v-if="item.skuName && item.label"
                  >{{ item.skuName }}
                </a-tag>
                <a-input
                  v-else-if="item.skuName == ''"
                  style="width: 160px"
                  v-model:value="item.label"
                  placeholder="规格名"
                />
              </div>

              <div class="skuName_1" v-if="item.skuName == ''" @click="AddSku(item, index)"
                ><el-icon><Check /></el-icon
              ></div>
            </div>
            <div class="skuValue">
              <div style="display: flex">
                <span style="padding: 5px">规格值:</span>
                <div
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                  style="display: flex; align-items: center"
                >
                  <a-tag
                    @close="DelskuValue(item, index1)"
                    closable
                    v-if="item1.skuName && item1.label"
                    >{{ item1.skuName }}</a-tag
                  >
                  <a-input
                    v-else-if="item1.skuName == ''"
                    style="width: 160px"
                    v-model:value="item1.label"
                    placeholder="价格"
                  />
                  <div v-if="item1.skuName == ''" class="skuValue_1" @click="AddValue(item1, item)"
                    ><el-icon><Check /></el-icon
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <a-button v-if="skuList.length == 0" type="dashed" style="width: 30%" @click="AddSkuC">
            <!-- <PlusOutlined /> -->
            添加规格
          </a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="规格Table">
        <a-table :columns="columns" :data-source="dataSource" bordered>
          <template #headerCell="{ column }">
            <!-- 限制只有name才能是蓝色 -->
            <template
              v-if="
                ['skuPrice', 'skustockNum', 'skuintegral', 'skustockNum'].includes(column.dataIndex)
              "
            >
              <span>{{ column.title }}</span>
              <el-icon @click="Countprice(column)"><ArrowDownBold /></el-icon>
            </template>
          </template>

          <template #bodyCell="{ column, record, index }">
            <template
              v-if="
                ['skuPrice', 'skustockNum', 'skuintegral', 'skustockNum'].includes(column.dataIndex)
              "
            >
              <div>
                <a-input v-if="column.dataIndex == 'skuPrice'" v-model:value="record.skuPrice" />
                <a-input
                  v-if="column.dataIndex == 'skustockNum'"
                  v-model:value="record.skustockNum"
                />
                <a-input
                  v-if="column.dataIndex == 'skuintegral'"
                  v-model:value="record.skuintegral"
                />
              </div>
            </template>
            <template v-else-if="['skuImage'].includes(column.dataIndex)">
              <div>
                <div>
                  <div v-if="record.image" style="display: flex; flex-wrap: nowrap"
                    ><div
                      style="width: 80px; height: 80px; padding: 5px"
                      v-for="(item, index1) in record.image"
                      :key="index1"
                    >
                      <img :src="item.url" style="width: 100%; height: 100%; object-fit: contain"
                    /></div>
                  </div>
                  <a-button v-else class="ant-upload-text" @click="uploadingSku(record, index)"
                    >上传图片</a-button
                  >
                </div>
              </div>
            </template>
          </template>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="4" tab="富文本">
        <a-row :gutter="16">
          <a-col :span="24">
            <Tinymce v-model="form.contents" @change="handleChange1" width="100%" />
          </a-col> </a-row
      ></a-tab-pane>
      <a-tab-pane key="5" tab="预览">
        <a-row :gutter="16"> <a-col :span="24"> 暂不支持 </a-col> </a-row></a-tab-pane
      >
      <!-- <a-tab-pane key="3" tab="Tab 3">Content of Tab 3</a-tab-pane> -->
    </a-tabs>
    <a-drawer
      title="文件管理"
      width="90%"
      :open="open_image"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="onClose1"
      ><fileIndex @upload="upload_file"
    /></a-drawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUpdated } from 'vue';
  import { Tinymce } from '/@/components/Tinymce/index';
  import { message } from 'ant-design-vue';

  import { Check, ArrowDownBold } from '@element-plus/icons-vue';
  import { groupSku } from './goodsList';
  import fileIndex from '/@/views/locality/fileManagement/fileIndex.vue';

  {
    Tinymce;
    fileIndex;
  }
  let $emit = defineEmits(['onReturn']);

  let props = defineProps(['select_title', 'select_data', 'options3']);
  const open_image: any = ref(false);
  // const uploadList: any = ref([]);
  const onClose1 = () => {
    open_image.value = false;
  };

  const SkuIndex: any = ref('');
  function uploadingSku(item, index) {
    open_image.value = true;
    SkuIndex.value = index;

    select_uploading.value = 'sku';
  }

  function upload_file(type, item) {
    console.log(type, item, select_uploading.value);

    if (type == 'image') {
      if (select_uploading.value == 'previewUrl') {
        // uploadList.value = item;

        form.value.previewUrl = item;
      } else if (select_uploading.value == 'rotationImgsJson') {
        form.value.rotationImgsJson = item;
      } else if (select_uploading.value == 'sku') {
        console.log(item);

        dataSource.value[SkuIndex.value].image = item;
        console.log(dataSource.value);
      }
      open_image.value = false;
    }
  }

  const showTime = ref('');
  function select_time(time) {
    showTime.value = time;
    form.value.goodsBeginTime = time[0];
    form.value.goodsEndingTime = time[1];
  }

  function deleteSku() {
    dataSource.value = [];
    skuList.value = [];
  }

  const select_uploading: any = ref('');

  function uploading(type) {
    open_image.value = true;
    if (type == 'previewUrl') {
      select_uploading.value = 'previewUrl';
    } else if (type == 'rotationImgsJson') {
      select_uploading.value = 'rotationImgsJson';
    }
  }

  const categoryId: any = ref('');
  function submit() {
    form.value.extJson = form.value.extJson ? '1' : '0';
    form.value.goodsStatus = form.value.goodsStatus ? '1' : '0';
    var str = '';
    if (form.value.categoryId)
      form.value.categoryId.forEach((item, index) => {
        if (index == 0) str += String(item);
        else str += +',' + String(item);
      });

    form.value.categoryId = str.replace('NaN', ',').replace('NaN', ',').replace('NaN', ',');

    try {
      if (dataSource.value.length != '')
        form.value.goodsSkuJson = JSON.stringify({
          new: dataSource.value,
          old: skuList.value,
        });
      else form.value.goodsSkuJson = '';
    } catch (e) {
      console.log(e);
    }

    // 清除数据
    dataSource.value = [];

    $emit('onReturn', form.value, props.select_title);
    // message.success('商品已提交,可以添加数据了');
  }

  function Countprice(item) {
    if (item.dataIndex == 'skuPrice') {
      dataSource.value.filter((element) => {
        if (dataSource.value[0].skuPrice) {
          element.skuPrice = dataSource.value[0].skuPrice;
        }
      });
    } else if (item.dataIndex == 'skustockNum') {
      dataSource.value.filter((element) => {
        if (dataSource.value[0].skustockNum) {
          element.skustockNum = dataSource.value[0].skustockNum;
        }
      });
    } else if (item.dataIndex == 'skuintegral') {
      dataSource.value.filter((element) => {
        if (dataSource.value[0].skuintegral) {
          element.skuintegral = dataSource.value[0].skuintegral;
        }
      });
    }
  }

  function AddSkuC() {
    skuList.value = [
      {
        label: '',
        skuName: '',
        skuValue: '',
        skuPrice: '',
        skuInventory: '',
        children: [
          {
            label: '',
            skuName: '',
            skuValue: '',
            skuPrice: '',
            skuInventory: '',
          },
        ],
      },
    ];
  }

  function product() {
    dataSource.value = groupSku(skuList.value);
    message.success('生成成功!');
    activeKey.value = '3';
  }

  function clearSku() {
    localStorage.removeItem('skuList');
    skuList.value = [
      {
        label: '',
        skuName: '',
        skuValue: '',
        skuPrice: '',
        skuInventory: '',
        children: [
          {
            label: '',
            skuName: '',
            skuValue: '',
            skuPrice: '',
            skuInventory: '',
          },
        ],
      },
    ];
    dataSource.value = [];
    message.success('重置成功!');
  }
  function savaSku() {
    if (skuList.value.length == 0) {
      message.error('暂未设置规格!');
      return;
    }
    localStorage.setItem('skuList', JSON.stringify(skuList));
    message.success('保存成功!');
  }

  function DelskuName(item, index) {
    skuList.value.splice(index, 1);
  }

  function DelskuValue(item, index1) {
    item.children.splice(index1, 1);
  }

  function AddSku(item, index) {
    console.log(item);
    item.skuName = item.label;
    skuList.value.push({
      label: '',
      skuName: '',
      skuValue: '',
      skuPrice: '',
      skuInventory: '',
      children: [
        {
          label: '',
          skuName: '',
          skuValue: '',
          skuPrice: '',
          skuInventory: '',
        },
      ],
    });
  }

  function AddValue(item1, item) {
    console.log(item1);

    item1.skuName = item1.label;
    item.children.push({
      skuName: '',
      skuValue: '',
      skuPrice: '',
      skuInventory: '',
      label: '',
    });
  }
  var skuList: any = ref([
    {
      label: '',
      skuName: '',
      skuValue: '',
      skuPrice: '',
      skuInventory: '',
      children: [
        {
          label: '',
          skuName: '',
          skuValue: '',
          skuPrice: '',
          skuInventory: '',
        },
      ],
    },
  ]);
  // const addDomain = () => {
  //   message.success(123);
  // };
  const columns = [
    {
      title: '规格名',
      dataIndex: 'skuName',
      key: 'skuName',
      align: 'center',
    },
    {
      title: '价格',
      dataIndex: 'skuPrice',
      key: 'skuPrice',
      align: 'center',
    },
    {
      title: '库存',
      dataIndex: 'skustockNum',
      align: 'center',
    },
    {
      title: '积分',
      dataIndex: 'skuintegral',
      align: 'center',
    },
    {
      title: '图片',
      dataIndex: 'skuImage',
      align: 'center',
    },
  ];
  const options_type: any = ref([]);
  const handleChange3 = (value: any) => {
    form.value.categoryId = value;
  };

  const dataSource = ref();

  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  const activeKey = ref('1');
  const filterOption2 = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };

  const handleBlur = () => {
    console.log('blur');
  };
  const handleBlur2 = () => {
    console.log('blur');
  };
  const handleFocus = () => {
    console.log('focus');
  };
  const handleFocus2 = () => {
    console.log('focus');
  };

  const handleChange2 = (value: any) => {
    console.log(`selected ${value}`);
  };

  const options1: any = ref([
    { value: '1', label: '面膜' },
    { value: '2', label: '零食' },
    { value: '3', label: '阿里巴巴' },
  ]);
  const options2: any = ref([
    { value: '1', label: '快递' },
    { value: '2', label: '自提' },
    { value: '3', label: '到店消费' },
    { value: '4', label: '快递自提都支持' },
    { value: '5', label: '全部支持' },
  ]);

  function handleChange1(value: string) {
    console.log(value);
  }

  let form: any = ref({
    distributionFee: '',
    business_id: '',
    effectDays: '',
    extJson: false,
    categoryId: [],
    goodsBeginTime: '',
    goodsEndingTime: '',
    goodsDetails: '',
    goodsDetailsJson: '',
    goodsSkuJson: '',
    goodsPrice: '',
    goodsStatus: false,
    goodsType: '',
    limitNum: '',
    goodsName: '',
    memberPrice: '',
    packingFee: '',
    previewUrl: '',
    rewardIntegral: '',
    rotationImgsJson: '',
    scribePrice: '',
    stockNum: '',
    contents: '',
    keywords: '',
    status: '',
    subtitle: '',
  });
  const rules: any = {
    goodsName: [{ required: true, message: '请输入商品名称' }],
    other: [{ required: false, message: '用来控制输入' }],
    description: [{ required: true, message: 'Please enter url description' }],
  };

  onUpdated(() => {
    options_type.value = props.options3;
    if (localStorage.getItem('sum') == '1')
      if (props.select_title == '新增') {
        localStorage.setItem('sum', '2');
        const sku = localStorage.getItem('skuList');
        if (sku) {
          skuList.value = JSON.parse(sku)._value;
        }

        dataSource.value = [];
        form.value = {
          distributionFee: '',
          business_id: '',
          effectDays: '',
          extJson: false,
          categoryId: [],
          goodsBeginTime: '',
          goodsEndingTime: '',
          goodsDetails: '',
          goodsDetailsJson: '',
          goodsSkuJson: '',
          goodsPrice: '',
          goodsStatus: false,
          goodsType: '',
          limitNum: '',
          goodsName: '',
          memberPrice: '',
          packingFee: '',
          previewUrl: '',
          rewardIntegral: '',
          rotationImgsJson: '',
          scribePrice: '',
          stockNum: '',
          contents: '',
          keywords: '',
          status: '',
          subtitle: '',
        };
      } else {
        form.value = props.select_data;

        try {
          if (form.value.categoryId.length && form.value.categoryId != '0') {
            console.log('进来', form.value.categoryId);

            var cate = [];
            if (typeof form.value.categoryId === 'string')
              form.value.categoryId = form.value.categoryId.split(',');
            form.value.categoryId.forEach((item) => {
              cate.push(parseInt(item));
            });
            form.value.categoryId = cate;
            console.log(form.value.categoryId, form.value);
          }
        } catch (error) {
          message.error(error);
          // window.location.reload(true);
        }

        // 处理编辑业务
        if (props.select_data.goodsSkuJson) {
          skuList.value = JSON.parse(props.select_data.goodsSkuJson)['old'];
          dataSource.value = JSON.parse(props.select_data.goodsSkuJson)['new'];
        } else {
          // 检查是否保存过规格

          const sku = localStorage.getItem('skuList');
          if (sku) {
            skuList.value = JSON.parse(sku)._value;
          }
        }
      }
  });
  onMounted(() => {
    options_type.value = props.options3;

    if (localStorage.getItem('sum') == '1')
      if (props.select_title == '新增') {
        localStorage.setItem('sum', '2');
        const sku = localStorage.getItem('skuList');
        if (sku) {
          skuList.value = JSON.parse(sku)._value;
        }
        dataSource.value = [];
        form.value = {
          distributionFee: '',
          business_id: '',
          effectDays: '',
          extJson: false,
          categoryId: [],
          goodsBeginTime: '',
          goodsEndingTime: '',
          goodsDetails: '',
          goodsDetailsJson: '',
          goodsSkuJson: '',
          goodsPrice: '',
          goodsStatus: false,
          goodsType: '',
          limitNum: '',
          goodsName: '',
          memberPrice: '',
          packingFee: '',
          previewUrl: '',
          rewardIntegral: '',
          rotationImgsJson: '',
          scribePrice: '',
          stockNum: '',
          contents: '',
          keywords: '',
          status: '',
          subtitle: '',
        };
      } else {
        form.value = props.select_data;

        try {
          if (form.value.categoryId.length) {
            var cate = [];
            form.value.categoryId = form.value.categoryId.split(',');
            form.value.categoryId.forEach((item) => {
              cate.push(parseInt(item));
            });
            form.value.categoryId = cate;
          }
        } catch (error) {
          message.error(error);
          // window.location.reload(true);
        }
        // 处理编辑业务
        if (props.select_data.goodsSkuJson) {
          skuList.value = JSON.parse(props.select_data.goodsSkuJson)['old'];
          dataSource.value = JSON.parse(props.select_data.goodsSkuJson)['new'];
        } else {
          // 检查是否保存过规格
          const sku = localStorage.getItem('skuList');
          if (sku) {
            skuList.value = JSON.parse(sku)._value;
          }
        }
      }
  });
</script>
<style scoped>
  .skuName {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #f1f1f1;
  }

  .skuValue {
    display: flex;
    align-items: center;

    /* justify-content: space-between; */
    width: 100%;
    padding: 5px;
    animation: fadenum 1s 1;
    background-color: #fcfbfb;
  }

  .dynamic-delete-button {
    position: relative;
    top: 4px;
    transition: all 0.3s;
    color: #999;
    font-size: 24px;
    cursor: pointer;
  }

  .dynamic-delete-button:hover {
    color: #777;
  }

  .dynamic-delete-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .skuValue_1 {
    /* padding: 5px 15px;
    background-color: rgb(245 245 245 / 10%);
    box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%); */

    color: white;
  }

  @keyframes fadenum {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .skuName_1 {
    color: #f1f1f1;
  }

  .skuName:hover {
    .skuName_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
    }
  }

  .skuValue:hover {
    .skuValue_1 {
      padding: 5px 10px;
      border-radius: 50%;
      background-color: rgb(245 245 245 / 10%);
      box-shadow: 1px 1px 4px 1px rgb(181 180 180 / 40%);
      color: black;
      font-weight: 700;
    }
  }
</style>
